<template>
<div class="wrap-Team">
    <G_header title="我的团队" />
    <van-tabs v-model="active" @change="onLoad">
        <van-tab title="已邀会员">
            <div class="header-wrap">
                <div class="header clearfix">
                    <h1>{{ data.user.total }}</h1>
                    <p>全部会员</p>
                </div>
            </div>
            <van-list v-model="loading" :finished="finished.user" finished-text="没有更多了" @load="onLoad" >
                <div class="items" v-for="(item,index) in list.user" :key="index">
                    <div>
                        <van-image round width="100%" height="100%" :src=" item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                    </div>
                    <div>
                        <!-- {{pageData}} -->
                        <div class="title">
                            <p>{{ item.nickname }}</p>
                        </div>
                        <div class="time">

                        </div>
                    </div>
                    <div class="steats">
                        {{ item.updated_at }}
                        <!-- <span>未下单</span> -->
                    </div>
                </div>
            </van-list>

        </van-tab>
        <van-tab title="免费店铺">
            <div class="header-wrap">
                <div class="header clearfix">
                    <h1>{{ data.free.total }}</h1>
                    <p>免费店铺</p>
                </div>
            </div>

           <van-list v-model="loading" :finished="finished.free" finished-text="没有更多了" @load="onLoad" >
                <div class="items" v-for="(item,index) in list.free" :key="index">
                    <div>
                        <van-image round width="100%" height="100%" :src=" item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                    </div>
                    <div>
                        <!-- {{pageData}} -->
                        <div class="title">
                            <p>{{ item.nickname }}</p>
                        </div>
                        <div class="time">

                        </div>
                    </div>
                    <div class="steats">
                        {{ item.updated_at }}
                        <!-- <span>未下单</span> -->
                    </div>
                </div>
                </van-list>
        </van-tab>
        <van-tab title="分店商铺">
            <div class="header-wrap">
                <div class="header clearfix">
                    <h1>{{ data.vip.total }}</h1>
                    <p>分店商铺</p>
                </div>
            </div>
            <van-list v-model="loading" :finished="finished.vip" finished-text="没有更多了" @load="onLoad" >
                <div class="items" v-for="(item,index) in list.vip" :key="index">
                    <div>
                        <van-image round width="100%" height="100%" :src=" item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                    </div>
                    <div>
                        <!-- {{pageData}} -->
                        <div class="title">
                            <p>{{ item.nickname }}</p>
                        </div>
                        <div class="time">

                        </div>
                    </div>
                    <div class="steats">
                        {{ item.updated_at }}
                        <!-- <span>未下单</span> -->
                    </div>
                </div>
                </van-list>
        </van-tab>
        <van-tab title="店长">
            <div class="header-wrap">
                <div class="header clearfix">
                    <h1>{{ data.manager.total }}</h1>
                    <p>店长</p>
                </div>
            </div>
             <van-list v-model="loading" :finished="finished.manager" finished-text="没有更多了" @load="onLoad" >
                <div class="items" v-for="(item,index) in list.manager" :key="index">
                    <div>
                        <van-image round width="100%" height="100%" :src=" item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                    </div>
                    <div>
                        <!-- {{pageData}} -->
                        <div class="title">
                            <p>{{ item.nickname }}</p>
                        </div>
                        <div class="time">

                        </div>
                    </div>
                    <div class="steats">
                        {{ item.updated_at }}
                        <!-- <span>未下单</span> -->
                    </div>
                </div>
                </van-list>
        </van-tab>
    </van-tabs>

</div>
</template>

<script>
export default {
    name: 'Team',
    data() {
        return {
            active: 0,
            data: {
              free:[],
              vip:[],
              manager:[],
              user:[]
            },
            list:{
              free:[],
              vip:[],
              manager:[],
              user:[]
            },
            loading: false,
            finished: {
              free:false,
              vip:false,
              manager:false,
              user:false
            },
            page:0,
        }
    },
    created() {
        // this.getTopData();
    },
    methods: {
        onLoad() {
            let type = '';
            let page;
            let totalpage;
            switch (this.active) {
                case 1:
                    type = 'free'
                    page = this.data.free.from;
                    totalpage = this.data.free.last_page;
                    break;
                case 2:
                    type = 'vip'
                    page = this.data.vip.from;
                    totalpage = this.data.vip.last_page;
                    break;
                case 3:
                    type = 'manager'
                    page = this.data.manager.from;
                    totalpage = this.data.manager.last_page;
                    break;
                case 0:
                    type = 'user'
                    page = this.data.user.from;
                    totalpage = this.data.user.last_page;
                    break;
            };
            
            if(!page){
              page = 0;
            }
            let currentPage = parseInt(page) + 1;
            if(currentPage <= totalpage || !totalpage){
              this.getData(type,{page:currentPage})
            }
            
            
        },
        async getData(type,params = {}){
            let _this = this;
            params.token = sessionStorage.getItem("token");
            this.axios.get('/api/reseller/fans_data/' + type, {
                params
            }).then(res => {
                switch (type) {
                  case 'free':
                      this.data.free = res.data.data;
                      res.data.data.data.forEach((item)=>{
                        this.list.free.push(item)
                      })
                      if(res.data.data.last_page == res.data.data.current_page){
                        this.finished.free = true;
                      }
                      break;
                  case 'vip':
                      this.data.vip = res.data.data;
                      res.data.data.data.forEach((item)=>{
                        this.list.vip.push(item)
                      })
                      if(res.data.data.last_page == res.data.data.current_page){
                        this.finished.vip = true;
                      }
                      break;
                  case 'manager':
                      this.data.manager = res.data.data;
                      res.data.data.data.forEach((item)=>{
                        this.list.manager.push(item)
                      })
                      if(res.data.data.last_page == res.data.data.current_page){
                        this.finished.manager = true;
                      }
                      break;
                  case 'user':
                      this.data.user = res.data.data;
                      res.data.data.data.forEach((item)=>{
                        this.list.user.push(item)
                      })
                      if(res.data.data.last_page == res.data.data.current_page){
                        this.finished.user = true;
                      }
                      break;
              };
              
              _this.loading = false;
            }).catch(err => {
                console.log(err);

            })
        }
    }
}
</script>

<style lang="less" scoped>
.items {
    background: white;
    padding: 5px 20px;
    border-bottom: 1px solid rgba(170, 170, 170, .2);
    display: grid;
    grid-template-columns: 52px 1fr 170px;
    grid-template-rows: 1fr;
    line-height: 22px;

    .time,
    .steats {
        color: rgba(0, 00, 0, .6)
    }

    .title p {
        line-height: 34px;
        padding-left: 5px;
    }

    .steats span {
        padding: 2px 4px;
        border: 1px solid #999;
    }

    > :nth-child(1) {
        margin-top: .6rem;
        width: 50px;
        height: 50px;
        justify-content: center;
    }

    > :nth-child(3) {
        margin-right: 5px;
        line-height: 5rem;
        text-align: right;
    }
}

.header-wrap {
    padding: 5px 10px;

    .header {
        padding: 10px 0;
        border-radius: 8px;
        width: 100%;
        color: white;
        background-image: linear-gradient(to bottom, rgb(234, 205, 113) 0%, rgba(214, 151, 91) 100%);

        h1,
        p {
            text-align: center;
            margin: .35rem 0;
            font-weight: 500;
        }

        .r {
            margin: 0 10px 0 0;
            background: rgba(231, 206, 152);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
        }
    }
}
</style>
